<template>
	<view class="login">
		<view class="logo"><image src="../../static/yibu.png" mode="widthFix"></image></view>

		<view class="text">欢迎登陆伊布博客</view>

		<u--form labelWidth="30" labelPosition="left" :model="form" :rules="rules" ref="form">
			<u-form-item leftIcon="account" prop="phone" ref="item1">
				<u--input v-model="form.phone" border="none" placeholder="请输入手机号" placeholderStyle="left:4%;color: #c0c4cc;"></u--input>
			</u-form-item>
			<u-form-item leftIcon="lock" prop="password" ref="item1">
				<u--input :password="true" v-model="form.password" border="none" placeholder="请输入密码" placeholderStyle="left:4%;color: #c0c4cc;"></u--input>
			</u-form-item>
		</u--form>

		<u-button @click="login" class="login-btn">登陆</u-button>
		<view class="register-jump" @click="jumpRegister">没有账号？点击注册</view>
	</view>
</template>

<script>
import { login } from '@/config/api.js';
import { mapMutations } from 'vuex';
// const route = uni.$u.route;

export default {
	name: 'login',
	data() {
		return {
			form: {
				phone: '',
				password: ''
			},
			rules: {
				phone: {
					type: 'string',
					required: true,
					length: 11,
					message: '请注意手机号格式',
					trigger: ['blur', 'change']
				},
				password: {
					type: 'string',
					min: 6,
					max: 20,
					required: true,
					message: '请填写6～20位的密码',
					trigger: ['blur', 'change']
				}
			}
		};
	},
	methods: {
		...mapMutations(['setUser']),
		async login() {
			try {
				await this.$refs.form.validate();

				const user = await login(this.form.phone, this.form.password);

				//	如果登陆失败，将异常告知给用户
				if (user.code !== 200)
					return uni.showToast({
						title: user.msg,
						icon: 'error'
					});

				this.setUser(user.data);
				uni.showToast({
					title: '登陆成功'
				});
				uni.switchTab({
					url: '/pages/index/index'
				});
			} catch (e) {
				console.log(e);
			}
		},
		jumpRegister() {
			this.$emit('jumpResgister');
		}
	},
	mounted() {
		console.log('onshow');
		this.form.phone = uni.getStorageSync('userphone') || '';
	}
};
</script>

<style lang="scss">
* {
	font-family: 'catstyle';
}
.login {
	width: 80%;
	height: 65vh;
	margin: 0 auto;
	padding: 30px;
	box-sizing: border-box;
	background-color: #fff;
	border-radius: 10px;

	.logo {
		width: 104px;
		margin: 0 auto;

		image {
			width: 100%;
		}
	}

	.text {
		margin-top: 10px;
		font-size: 26px;
		font-weight: 600;
		text-align: center;
	}

	::v-deep .uni-input-input {
		width: 89%;
		border-radius: 4px;
		border: 1px solid #dcdfe6;
		padding: 0px 10px;
		border-color: rgb(242, 174, 39);
	}

	::v-deep .u-input__content__field-wrapper__field {
		height: 38px;
	}

	.login-btn {
		margin-top: 20px;
		background-color: #f09819;
		border-color: #ff5858;
		font-size: 20px;
	}
	.register-jump {
		margin-top: 5vw;
		color: #a57c4e;
		font-size: 5vw;
		font-weight: 600;
		transform: translateX(9vw);
	}
}
</style>
